<template>
    <el-row class="user-box">
        <el-col :span="20" :offset="2">
            <el-tabs v-model="type" type="border-card" @tab-click="handleClick">
                <el-tab-pane lazy label="个人信息" name="info">
                    <info :self="self"></info>
                </el-tab-pane>
                <el-tab-pane lazy label="关注信息" name="attention">
                    <user :self="self"></user>
                </el-tab-pane>
                <el-tab-pane lazy label="粉丝信息" name="fans">
                    <user :self="self" fans></user>
                </el-tab-pane>
                <el-tab-pane lazy label="用户帖子" name="post">
                    <post :self="self"></post>
                </el-tab-pane>
                <el-tab-pane v-if="self" lazy label="用户收藏" name="collect">
                    <collect></collect>
                </el-tab-pane>
                <el-tab-pane v-if="self" lazy label="用户评论" name="reply">
                    <reply></reply>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
</template>

<script>
    import Info from './info'
    import User from './user'
    import Post from './post'
    import Collect from './collect'
    import Reply from './reply'

    export default {
        name: 'userInfo',
        components: {
            Info,
            User,
            Post,
            Collect,
            Reply
        },
        data () {
            return {
                type: '',
                self: false
            }
        },
        mounted () {
            this.synchronousURL()
        },
        updated () {
            this.synchronousURL()
        },
        watch: {
            $route (to, from) {
                this.synchronousURL()
            }
        },
        methods: {
            synchronousURL () {
                let paths = this.$route.path.split('/')
                if (paths.length === 3) {
                    this.self = true
                    this.type = paths[2]
                } else if (paths.length === 4) {
                    this.self = false
                    this.type = paths[2]
                } else {
                    this.type = ''
                }
            },
            handleClick (tab, event) {
                let paths = this.$route.path.split('/')
                paths[2] = this.type
                this.$router.push(paths.join('/'))
            }
        }
    }
</script>

<style scoped>
    .user-box {
        margin: 32px 0;
    }
</style>
